<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>当前n的值为：{{n}}</h2>
            <button @click="n++">点我n加1</button>
            <input type="text" v-big="n" />
        </div>
    </body>
    <script>
        // 这是全局自定义指令的写法
        // Vue.directive("big", {
        //     bind(element, binding) {
        //         element.value = binding.value;
        //     },
        //     // instered表示的是dom元素已经插入到页面后的动作
        //     inserted(element, binding) {
        //         element.focus();
        //     },
        //     // 这个表示的是当前模板更新时的回调函数，不一定非要当前元素的绑定值发生更新，
        //     // 只要这个模板内有数据更新就会重新解析模板，顺带也会指向这个update回调
        //     update(element, binding) {
        //         element.value = binding.value;
        //     },
        // });

        const vm = new Vue({
            data() {
                return {
                    n: 1,
                };
            },
            directives: {
                // 这是完整的写法，注意，当名称过长的时候，使用-隔开，比如这里声明自定义指令是time-formated-data，那么绑定元素时就应该写 v-time-formated-data
                big: {
                    // bind是数据和元素绑定时的动作，此时页面上还没有呈现dom元素
                    bind(element, binding) {
                        element.value = binding.value;
                    },
                    // instered表示的是dom元素已经插入到页面后的动作
                    inserted(element, binding) {
                        element.focus();
                    },
                    // 这个表示的是当前模板更新时的回调函数，不一定非要当前元素的绑定值发生更新，
                    // 只要这个模板内有数据更新就会重新解析模板，顺带也会指向这个update回调
                    update(element, binding) {
                        element.value = binding.value;
                    },
                },
                // big(element, binding) {
                //     element.value = binding.value;
                // },
            },
        });

        vm.$mount("#root");
    </script>
</html>
